<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Flex 布局- 网格布局</title>
  <link rel="stylesheet" type="text/css" href="base.css">
  <style type="text/css">
  h3{font-size: 18px; font-weight: bold;}
  .GridWrap{margin-bottom: 30px;}
  .GridWrap1 .Grid {display: flex; }
  .GridWrap1 .Grid-cell {flex: 1; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; margin-bottom: 10px;}

  .GridWrap2 .Grid{display: flex;}
  .GridWrap2 .Grid-cell{flex: 1; border: 1px solid #ccc; padding: 20px; box-sizing: border-box; margin-bottom: 10px;}
  .GridWrap2 .Grid-cell.u-full{flex: 0 0 100%;}
  .GridWrap2 .Grid-cell.u-1of2{flex: 0 0 50%;}
  .GridWrap2 .Grid-cell.u-1of3{flex: 0 0 33.3333%;}
  .GridWrap2 .Grid-cell.u-1of4{flex: 0 0 25%;}

  </style>
</head>

<body>
<div class="wrap">
  
  <div class="GridWrap GridWrap1">
    <h3>基本网格布局</h3>
    <div class="Grid">
      <div class="Grid-cell">1/2 内容</div>
      <div class="Grid-cell">1/2 内容</div>
    </div>
    <div class="Grid">
      <div class="Grid-cell">1/3 内容</div>
      <div class="Grid-cell">1/3 内容</div>
      <div class="Grid-cell">1/3 内容</div>
    </div>
    <div class="Grid">
      <div class="Grid-cell">1/4 内容</div>
      <div class="Grid-cell">1/4 内容</div>
      <div class="Grid-cell">1/4 内容</div>
      <div class="Grid-cell">1/4 内容</div>
    </div>
  </div>
  
  <div class="GridWrap GridWrap2">
    <h3>百分比布局</h3>
    <div class="Grid">
      <div class="Grid-cell u-1of4"> 1/4 内容 </div>
      <div class="Grid-cell"> 内容自动 </div>
      <div class="Grid-cell u-1of3"> 1/3 内容 </div>
    </div>
    <div class="Grid">
      <div class="Grid-cell u-1of2"> 1/2 内容 </div>
      <div class="Grid-cell "> 内容自动 </div>
      <div class="Grid-cell u-1of3"> 1/3 内容 </div>
    </div>
    <div class="Grid">
      <div class="Grid-cell u-1of4"> 1/4 内容 </div>
      <div class="Grid-cell u-1of4"> 1/4 内容 </div>
      <div class="Grid-cell"> 内容自动 </div>
      <div class="Grid-cell u-1of3"> 1/3 内容 </div>
    </div>
  </div>


</div>

</body>

</html>
